<template>
    <div class="login">
      <div class="title">
        <h2>速 讯</h2>
        <span>拉近我们心灵的距离，感知爱与牵绊</span>
      </div>
      <div class="main-content">
        <el-tabs v-model="activeName" @tab-click="handleToggle">
          <el-tab-pane label="注册" name="register">
            <div class="rig">
              <el-input v-model="inputUserName" placeholder="用户名"></el-input>
              <el-input type="password" v-model="inputPassword" placeholder="密码"></el-input>
              <el-input v-model="inputTel" placeholder="电话"></el-input>
              <el-button type="primary" @click="handelRegister">注 册</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="登录" name="login">
            <div class="log">
              <el-input v-model="inputUserName" placeholder="用户名"></el-input>
              <el-input type="password" v-model="inputPassword" placeholder="密码"></el-input>
              <el-button type="primary" @click="handelLogin">登 录</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

</template>

<script>
  import { Message } from 'element-ui';
    export default {
        name: "login",
        data() {
            return {
              activeName: 'login',
              inputUserName:'',
              inputPassword:'',
              inputTel:''
            }
        },
        methods: {
          handelRegister(){
            //注册事件
            const data={
              username:this.inputUserName,
              password:this.inputPassword,
              tel:this.inputTel
            };
            this.$http.toPost('user/register',data)
              .then(resp=>{
                if(resp.resultCode===-5){
                  Message.error({message:resp.resultMsg,duration:'2000'})
                }
                if(resp.resultCode===-1){
                  Message.error({message:resp.resultMsg,duration:'2000'})
                }
                if(resp.resultCode===0){
                  this.activeName= 'login';
                }
              })
              .catch(error=>{
                console.log(error)
              })
          },
          handelLogin(){
            //登录事件
            const data={
              username:this.inputUserName,
              password:this.inputPassword,
            };
            this.$http.toPost('user/login',data)
              .then(resp=>{
                if(resp.resultCode===0){
                  data.id=resp.data.id;
                  data.tel=this.inputTel;
                  window.localStorage.setItem('logInfo',JSON.stringify(data));
                  this.inputUserName='';
                  this.inputPassword='';
                  this.$router.push('/index')
                }else if(resp.resultCode===-4){
                  Message.error({message:"用户名或密码错误",duration:'2000'})
                }
              })
          },
          handleToggle(){
            if(this.activeName==='register'){
              this.inputUserName='';
              this.inputPassword='';
              this.inputTel='';
            }else{
              //如果是登录选项卡
              if(window.localStorage.getItem('logInfo')){
                //dom加载后自动获取localStorage里面的信息
                const data=JSON.parse(window.localStorage.getItem('logInfo'));
                this.inputUserName=data.username;
                this.inputTel=data.tel;
                this.inputPassword=data.password;
              }
            }
          }
        },
        computed: {},
        components: {},
        mounted() {
          if(this.activeName==='login'){
            //如果是登录选项卡
            if(window.localStorage.getItem('logInfo')){
              //dom加载后自动获取localStorage里面的信息
              const data=JSON.parse(window.localStorage.getItem('logInfo'));
              this.inputUserName=data.username;
              this.inputTel=data.tel;
              this.inputPassword=data.password;
            }
          }
        }
    }
</script>

<style lang="less" scoped>
  .login{
    width: 265px;
    margin: 0 auto;
    margin-top: 200px;
    .title{
      text-align: center;
      h2{
        font-family :YouYuan;
        width: 100%;
        color:#0F88EB;
        font-size:36px;
        line-height:7vh;
      }
      span{
        display: inline-block;
        margin: 10px auto;
        color:#C6C7C7;
        font-size: 14px;
      }
    }
    .main-content{
      text-align: center;
      .login .el-tabs__header{
        margin:0 auto;
        width:50%;
      }
      button{
        width: 100%;
        margin-top: 10px;

      }

    }

  }
</style>
